<template>
  <div id="scan-result">
    <div class="scan-title">
      <img src="../../assets/img/success.png" width="80" />
      <p>扫码成功，请入园！</p>
    </div>
    <div class="scan-info">
      <a-row class="scan-row" type="flex" justify="center">
        <a-col span="11"><p class="col-title">二维码类型：</p></a-col>
        <a-col span="10" offset="1"><p>承德一码通</p></a-col>
      </a-row>
      <a-row class="scan-row" type="flex" justify="center">
        <a-col span="11"><p class="col-title">游客姓名：</p></a-col>
        <a-col span="10" offset="1"
          ><p>{{ uerInfo.name }}</p></a-col
        >
      </a-row>
      <a-row class="scan-row" type="flex" justify="center">
        <a-col span="11"><p class="col-title">身份证号：</p></a-col>
        <a-col span="10" offset="1"
          ><p>{{ uerInfo.idcard }}</p></a-col
        >
      </a-row>
      <a-row class="scan-row" type="flex" justify="center">
        <a-col span="11">
          <a-row>
            <a-col span="2">
              <div style="cursor: pointer;margin-bottom: 5px">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>
                      特殊人群线上只能判别市民具有该资格。对于数据原因不能识别，
                      但市民能线下提供实体证件原件的，
                      业务系统应当确认用户资格。即一码通平台可作为，
                      具备资格且纳入一码通平台的特殊人群身份证明手段之一，
                      用于改善原有业务服务的用户体验。
                    </span>
                  </template>
                  <img
                    style="padding-bottom: 5px;"
                    src="../../assets/img/tip.png"
                    width="30"
                  />
                </a-tooltip>
              </div>
            </a-col>
            <a-col span="22">
              <p class="col-title">是否特殊人群优惠：</p>
            </a-col>
          </a-row>
        </a-col>
        <a-col span="10" offset="1"
          ><p>{{ uerInfo.localCitizen | transData }}</p></a-col
        >
      </a-row>
    </div>
  </div>
</template>

<script>
import ACol from "ant-design-vue/es/grid/Col";
export default {
  components: { ACol },
  data() {
    return {
      uerInfo: {
        idcard: "",
        name: "",
        uid: "",
        localCitizen: ""
      }
    };
  },
  created() {
    this.initData();
  },
  filters: {
    transData(data) {
      if (data) {
        return "是";
      } else {
        return "否";
      }
    }
  },
  methods: {
    initData() {
      let info = sessionStorage.getItem("user_info");
      if (info) {
        this.uerInfo = JSON.parse(info);
      }
    }
  }
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
#scan-result {
}
.scan-title {
  text-align: center;
  padding: 15px 0;
  p {
    font-size: 25px;
    color: #d81e06;
    font-family: AlibabaPuHuiTiR;
  }
}
.scan-info {
  width: 50%;
  margin: 10px auto;
  font-size: 22px;
  font-weight: 600;

  .scan-row {
    padding: 8px 0;
    .col-title {
      text-align: right;
    }
  }
}
</style>
